<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            border: 1px solid black;
            padding: 10px 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <label for="name">用户名称：</label>
            <input type="text" id="name" v-model="name">
        </div>
        <div>
            <label for="age">用户年龄：</label>
            <input type="text" id="age" v-model="age">
        </div>
        <div>
            <label for="sex">用户性别：</label>
            男：<input type="radio" id="sex" value="男" v-model="gender">
            女：<input type="radio" id="sex" value="女" v-model="gender">
            秘密：<input type="radio" id="sex" value="未知" v-model="gender">
        </div>
        <div>
            <label for="skill">用户技能：</label>
            <select id="skill" v-model="skill">
                <option value="java">java</option>
                <option value="html">html</option>
                <option value="javascript">javascript</option>
                <option value="vue">vue</option>
            </select>
        </div>
        <input type="button" value="添加新用户" @click="addUser()">
        <hr>
        <table id="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>技能</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="tb">
                <!-- <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>1</td>
                    <td>tom</td>
                    <td>23</td>
                    <td>男</td>
                    <td>vue</td>
                    <td>
                        <input type="button" value="删除">
                    </td>
                </tr> -->
                <tr v-for="(value,key,count) in msg">
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>{{key+1}}</td>
                    <td v-for="v in value">{{v}}</td>
                    <td>
                        <input type="button" value="删除" @click="deleteTr($event.target)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            name:"",
            age:"",
            gender:"",
            skill:"",
            msg:[]
        },
        methods: {
            addUser() {
                var obj={
                    name:this.name,
                    age:this.age,
                    gender:this.gender,
                    skill:this.skill
                };
                this.msg.push(obj);
            },
            deleteTr(e){
                var table=document.querySelector("#tb");
                table.removeChild(e.parentNode.parentNode);
            }
        }
    })
</script>

</html>